<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>LT 的后台</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="后台系统">
    <meta name="description" content="勉强算个管理系统">
    <meta name="author" content="yinqi">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--        头文件-->
        <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
        <div class="headerpage"></div>
        <script>
            $(".headerpage").load("header.html");
        </script>

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">

                                <div class="toolbar-btn-action">
                                    <a class="btn btn-primary m-r-5" href="./addCoding.html"><i class="mdi mdi-plus"></i> 新增</a>


                                </div>
                            </div>
                            <div class="card-body">

                                <div class="table-responsive" id="alltable">



                                </div>

                                <ul class="pagination" id="pageNub">
                                    <li class="disabled"><span>«</span></li>
                                    <li class="active"><span>1</span></li>
                                    <li><a href="#1">2</a></li>
                                    <li><a href="#1">3</a></li>
                                    <li><a href="#1">4</a></li>
                                    <li><a href="#1">5</a></li>
                                    <li><a href="#1">6</a></li>
                                    <li><a href="#1">7</a></li>
                                    <li><a href="#1">8</a></li>
                                    <li class="disabled"><span>...</span></li>
                                    <li><a href="#!">14452</a></li>
                                    <li><a href="#!">14453</a></li>
                                    <li><a href="#!">»</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<script>
    let CodingList;
    let a;
    let PN;
    //第几页
    function tableadd(b) {
        let tablestr=`<table class="table table-bordered" >
                  <thead>
                    <tr>
                      <th>id</th>
                      <th>名字</th>
                      <th>位置</th>
                      <th>时间</th>
                      <th>userid</th>

                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>`
        //每页显示
        a =[];
        PN=b
        for (let i =((PN-1)*5); i <PN*5 ;i++ ){
            a.push(CodingList[i])
        }
        console.log("a:");
        console.log(a);
        //循环输出每一行
        a.forEach(function (element) {
            if (element==undefined){
                console.log("输出空")
              return;
            }
            tablestr=tablestr +`<tr>
                      <th>${element.id}</th>
                      <th>${element.username}</th>
                      <th>${element.position}</th>
                      <th>${element.time}</th>
                      <th>${element.userid}</th>
                      <th><button class="btn btn-danger" onclick="del(${element.id})"> 删除</button></th>
                    </tr>`

        });;
        tablestr=tablestr+`</tbody>
                </table>`;

        console.log(tablestr)
        $("#alltable").html(tablestr);

    }
</script>

<script>


    // 判断前面的省略号
    // 显示前面左右四页
    // if(pageNow>5 && pageNow<pageNub-4){
    //     pagestr=pagestr+`<li class="disabled"><span>...</span></li>`
    //     for (let index = pageNow-4; index < pageNub-2 && index <=pageNow+4 &&  index>1; index++) {
    //         pagestr=pagestr+`<li><a href="#">${index}</a></li>`
    //     }
    // }else {//本体左边页码
    //     for (let index = 2; index < pageNub-2 && index <pageNow &&  index>1; index++) {
    //         pagestr=pagestr+`<li ><a href="#">${index}</a></li>`
    //     }
    // }
    //
    //
    //
    //
    // if(pageNub>pageNow+5){
    //     // 判断后面的省略号
    //     pagestr=pagestr+`<li class="disabled"><span>...</span></li>`
    //     for (let index = pageNub-4; index <= pageNub; index++) {
    //         pagestr=pagestr+`<li><a href="#">${index}</a></li>`
    //     }
    // }else{
    //     //本体右边页码
    //     pagestr=pagestr+`<li class="active"><a href="#">${pageNow}</a></li>`
    //
    //     for (let index = pageNow+1; index <= pageNub; index++) {
    //
    //         pagestr=pagestr+`<li ><a href="#">${index}</a></li>`
    //     }
    // }

    function  del(username0) {
        console.log(username0)
        $.ajax({

            url: "./delCoding/"+username0,
            type: "GET",
            dataType: "json",
            success: function(result) {
                data1=result;
                console.log("del success")
                // window.location.href="./showAll.html"
                aa(PN);


            },

            error:function (result) {
                data1=result;
                console.log(result)
                alert("删除失败,权限不够")

            }
        });
    }

    //第几页
    function aa(pageNow=1){
            PN=pageNow

            $.ajax({
                //获取总数据，顺便获取页码
                url: "./selectCoding",
                type: "POST",
                success: function (result) {
                    result = JSON.parse(result)
                    console.log(result)
                    console.log(result.length)
                    CodingList=result;

                    let pagestr=`<li onclick="tableadd(1)"><span>«</span></li>`
                    pageNub = Math.ceil(CodingList.length/5);



                    pagestr=pagestr+``
                    for (let index =1;index <=pageNub;index++){
                        if (index == pageNow){
                            pagestr=pagestr+`<li class="active" onclick="tableadd(${index})"><a >${index}</a></li>`
                        } else {
                            pagestr=pagestr+`<li onclick="tableadd(${index})"><a >${index}</a></li>`
                        }
                    }

                    pagestr=pagestr+`<li onclick="tableadd(CodingList.length)"><a >»</a></li>`
                    $("#pageNub").html(pagestr);


                    tableadd(PN);
                }
                ,error:function (result) {
                    console.log("失败")
                    console.log(result)
                }
            })

    }





</script>


<script type="text/javascript">
    aa()
    $(function(){
        $('.search-bar .dropdown-menu a').click(function() {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });
    });

    $(function () {

        tableadd(1)

    })
</script>
</body>
</html>